<template>
  <div ref="piechart" class="pie-chart"></div>
</template>

<script>
  import {
    format
  } from "echarts";
  export default {
    props: {
      pieData: {
        default: () => [],
      },
      overEmpty: {
        type: Boolean,
        default: () => false,
      },
    },
    data() {
      return {
        chart: null,
        pieIndex: "",
        title: "",
      };
    },
    watch: {
      pieData: {
        handler(val, newVal) {
          this.initChart();
        },
      },
    },
    beforeDestroy() {
      if (!this.chart) {
        return;
      }
      this.chart.dispose();
      this.chart = null;
    },
    mounted() {
      this.initChart();
    },
    methods: {
      initChart() {
        console.log(this.pieData);
        this.pieData.forEach((e) => {
          if (this.overEmpty && e.value < 0) {
            e.value = -e.value;
            e.tooltip = {
              formatter: function (params) {
                return `${params.marker}${params.name}(空编)：${params.value}`;
              },
            };
          } else if (this.overEmpty && e.value > 0) {
            e.tooltip = {
              formatter: function (params) {
                return `${params.marker}${params.name}(超编)：${params.value}`;
              },
            };
          }
        });
        this.chart = this.$echarts.init(this.$refs.piechart);
        let option = this.getOption();
        this.chart.resize();
        this.chart.setOption(option);
      },
      getOption() {
        var colorList = ["#DF796A", "#6293CD", "#D44B83", "#63BFB2"];
        let option = {
          tooltip: {
            trigger: "item",
            backgroundColor: "rgba(20, 24, 31,.6)",
            borderColor: "#0c2e36",
            textStyle: {
              color: "#fff",
            },
            // formatter: "{b}: {c}%",
          },
          legend: {
            orient: "vertical",
            itemWidth: 8, //图例宽度
            itemHeight: 8, //图例高度
            itemGap: 20, //图例之间的间隙
            bottom: "bottom",
            textStyle: {
              //图例文字的样式
              color: "#ffffff",
              fontSize: 16,
            },
          },
          series: [{
            name: "",
            type: "pie",
            radius: "65%",
            itemStyle: {
              normal: {
                color: function (params) {
                  return colorList[params.dataIndex];
                },
              },
            },
            label: {
              show: true,
              position: "inside",
              color: "#ffffff",
              formatter: "{d}%",
            },
            data: this.pieData,
          }, ],
        };

        return option;
      },
    },
  };

</script>

<style lang="scss" scoped>
  .pie-chart {
    width: 100%;
    height: 100%;
    position: relative;
    bottom: 20px;
  }

</style>
